<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<style type="text/css">
	.error{
		display:none;
		font-weight:bold;
		color:red;
	}
</style>
<body>
<form>
	<p>用户名：</p>
	<p><input type="text" name="username" class='auth'><span class='error'>至少六位！</span></p>
	<p>密码：</p>
	<p><input type="text" name="password" class='auth'><span class='error'>至少七位</span></p>
	<p>确认密码：</p>
	<p><input type="text" name="repassword" class='auth'><span class='error'>两次密码不一致</span></p>
	<p>邮箱：</p>
	<p><input type="text" name="email" class='auth'><span class='error'>邮箱格式不正确</span></p>
	<p>手机号</p>
	<p><input type="text" name="phone" class='auth' maxlength='11'><span class='error'>至少六位！</span></p>
	<p><input type="submit" name="" value='ok'></p>
</form>
</body>
<script type="text/javascript">

$('input[name=username]').blur(function(){
val=this.value;
if(val.length<6){
	$(this).next().show();
	$(this).data({'s':0});
}else{
	$(this).next().hide();
	$(this).data({'s':1});
}
});
$('input[name=password]').blur(function(){
	val=this.value;
	if(val.length<7){
		$(this).next().show();
		$(this).data({'s':0});
	}else{
		$(this).next().hide();
		$(this).data({'s':1});
	}
});
$('input[name=repassword]').blur(function(){
	val1=$('input[name=password]').val();
	val2=this.value;
	if(val1!=val2){
		$(this).next().show();
		$(this).data({'s':0});
	}else{
		$(this).next().hide();
		$(this).data({'s':1});
	}
});
$('input[name=email]').blur(function(){
val=this.value;
if(!val.match(/^\w+@\w\+\.\w+$/ig)){
	$(this).next().show();
	$(this).data({'s':0});
}else{
	$(this).next().hide();
	$(this).data({'s':1});
}
});
$('input[name=phone]').blur(function(){
val=this.value;
if(!val.match(/^139\d{8}$/ig)){
	$(this).next().show();
	$(this).data({'s':0});
}else{
	$(this).next().hide();
	$(this).data({'s':1});
}
});
$('form').submit(function(){
$('.auth').blur();
tot=0;
$('.auth').each(function(){
	tot+=$(this).data('s');
});
if(tot!=5){
	return false;
};

})
</script>
</html>
